<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" sizes="16x16" href="${ctxPath}/assets/common/favicon.ico">
    <title>登录 - Grocery</title>
    <link href="${ctxPath}/assets/common/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctxPath}/assets/common/static/css/style.css" rel="stylesheet">
    <link href="${ctxPath}/assets/common/static/css/colors/blue.css" id="theme" rel="stylesheet">
</head>

<body>

<div class="preloader">
    <svg class="circular" viewBox="25 25 50 50">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
    </svg>
</div>

<section id="wrapper">
    @var bgImg = images.loginBg();
    <div class="login-register" style="background-image:url(${bgImg});">
        <div class="login-box card">
            <div class="card-body">
                <form class="form-horizontal form-material" id="loginform" action="${ctxPath}/login" method="post">
                    <h3 class="box-title m-b-30">Grocery管理系统</h3>

                    @if(isNotEmpty(tips)){
                    <h5 class="box-title m-b-30" style="color: red;">${tips}</h5>
                    @}

                    <div class="form-group ">
                        <div class="col-xs-12">
                            <input class="form-control" name="username" type="text" required="" placeholder="账号" autocomplete="off"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <input class="form-control" name="password" type="password" required="" placeholder="密码" autocomplete="off"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12 p-l-0">
                            <div class="checkbox checkbox-info p-t-0">
                                <input id="checkbox-signup" type="checkbox" name="remember">
                                <label for="checkbox-signup"> 记住我 </label>
                            </div>
                        </div>
                        <div class="form-group text-center m-t-20 m-b-0">
                            <div class="col-xs-12">
                                <button class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light" type="submit">登录</button>
                            </div>
                        </div>
                    </div>
                  <!--  <div class="form-group m-b-0">
                        <div class="col-sm-12 text-center">
                        <p>没有账号? <a href="#" class="text-info m-l-5"><b>点击注册</b></a></p>
                        </div>
                    </div> -->
                </form>
            </div>
        </div>
    </div>
</section>

<script src="${ctxPath}/assets/common/plugins/jquery/jquery.min.js"></script>
<script src="${ctxPath}/assets/common/plugins/bootstrap/js/tether.min.js"></script>
<script src="${ctxPath}/assets/common/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${ctxPath}/assets/common/static/js/waves.js"></script>
<script src="${ctxPath}/assets/common/static/js/custom.min.js"></script>
<!--配置：-->
<!--颜色：默认是（0，0，0），格式是（R,G,B）-->
<!--透明度：（0-1），默认0.5-->
<!--线段的数量：默认0.5-->
<!--Z轴：默认-1-->
<!--<script type="text/javascript" color="0,0,255" opacity='0.8' zIndex="0" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>-->
<!--<script zIndex="-1">-->
    <!--!function() { //   添加光线粒子效应 粒子与线条自动游离连接，当粒子运动碰撞到边缘时处理，被弹回相反方向-->
        <!--function A(a, b, c) {-->
            <!--return a.getAttribute(b) || c-->
        <!--}-->
        <!--function F(a) {-->
            <!--return document.getElementsByTagName(a);-->
        <!--}-->
        <!--function D() {-->
            <!--var c = F("script"),-->
            <!--a = c.length,-->
            <!--b = c[a - 1];-->
            <!--return {-->
                <!--l: a,-->
                <!--z: A(b, "zIndex", -1),-->
                <!--o: A(b, "opacity", 0.5),-->
                <!--c: A(b, "color", "0,0,0"),-->
                <!--n: A(b, "count", 199)-->
                <!--}-->
    <!--}-->
    <!--function E() {-->
        <!--x = i.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;-->
        <!--B = i.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;-->
    <!--}-->
    <!--function M() {-->
        <!--J.clearRect(0, 0, x, B);-->
        <!--var c = [I].concat(v);-->
        <!--var b, d, a, g, e, f;-->
        <!--v.forEach(function(h) {-->
            <!--h.x += h.xa,-->
            <!--h.y += h.ya,-->
            <!--h.xa *= h.x > x || h.x < 0 ? -1 : 1,-->
            <!--h.ya *= h.y > B || h.y < 0 ? -1 : 1,-->
            <!--J.fillRect(h.x - 0.5, h.y - 0.5, 1, 1);-->
            <!--for (d = 0; d < c.length; d++) {-->
                <!--b = c[d];-->
                <!--if (h !== b && null !== b.x && null !== b.y) {-->
                    <!--g = h.x - b.x;-->
                    <!--e = h.y - b.y;-->
                    <!--f = g * g + e * e;-->
                    <!--f < b.max && (b === I && f >= b.max / 2 && (h.x -= 0.03 * g, h.y -= 0.03 * e), a = (b.max - f) / b.max, J.beginPath(), J.lineWidth = a / 2, J.strokeStyle = "rgba(" + w.c + "," + (a + 0.2) + ")", J.moveTo(h.x, h.y), J.lineTo(b.x, b.y), J.stroke())-->
                <!--}-->
            <!--}-->
            <!--c.splice(c.indexOf(h), 1);-->
        <!--}),-->
        <!--C(M);-->
    <!--}-->
    <!--var i = document.createElement("canvas"),-->
    <!--w = D(),-->
    <!--L = "c_n" + w.l, //c_n2-->
    <!--J = i.getContext("2d"),-->
    <!--x,-->
    <!--B,-->
    <!--C = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||-->
    <!--function(a) {-->
        <!--window.setTimeout(a, 1000 / 45)-->
    <!--},-->
    <!--N = Math.random,-->
    <!--I = {-->
        <!--x: null,-->
        <!--y: null,-->
        <!--max: 20000-->
    <!--};-->
    <!--i.id = L;-->
    <!--i.style.cssText = "position:fixed;top:0;left:0;z-index:" + w.z + ";opacity:" + w.o;-->
    <!--F("body")[0].appendChild(i);-->
    <!--E();-->
    <!--window.onresize = E;-->
    <!--window.onmousemove = function(a) {-->
        <!--a = a || window.event,-->
        <!--I.x = a.clientX,-->
        <!--I.y = a.clientY-->
    <!--};-->
    <!--window.onmouseout = function() {-->
        <!--I.x = null,-->
        <!--I.y = null-->
    <!--};-->
    <!--for (var v = [], z = 0; w.n > z; z++) {-->
        <!--var G = N() * x,-->
        <!--H = N() * B,-->
        <!--y = 2 * N() - 1,-->
        <!--K = 2 * N() - 1;-->
        <!--v.push({-->
        <!--x: G,-->
        <!--y: H,-->
        <!--xa: y,-->
        <!--ya: K,-->
        <!--max: 6000-->
    <!--});-->
    <!--}-->
    <!--setTimeout(function() {-->
        <!--M()-->
    <!--}, 100)-->
    <!--} ();-->
<!--</script>-->

</body>

</html>